<!DOCTYPE html>
<!-- saved from url=(0026)https://www.kuangstudy.com/main -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zmz-支付宝支付</title>
    <link rel="stylesheet" href="css/main.css">

</head>
<body data-ext-version="3.1">
<div data-v-7e2550d6="" class="odm_extension image_downloader_wrapper"><!----></div>
<!--页面头部-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light">
    <div class="container">
        <a class="navbar-brand logo" href="https://www.kuangstudy.com/">
            <img style="width: 112px;" src="https://www.kuangstudy.com//assert/course/c1//index_topleft_logo_black.png" alt="">
        </a>
        <div class="collapse navbar-collapse position-relative">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item position-relative">
                    <a class="nav-link ksd-nav-linknav nav-link-course" href="https://www.kuangstudy.com/course">课程</a>
                    <i class="iconfont  ksd-bgd-left">免费</i>
                </li>
                <li class="nav-item">
                    <a class="nav-link ksd-nav-linknav nav-link-topics active"
                       href="https://www.kuangstudy.com/bbs">江湖</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link ksd-nav-linknav nav-link-down" href="https://www.kuangstudy.com/app">导航</a>
                </li>
            </ul>
            <div id="ksdloginbox">
                <div style="position: relative;top:-18px">
                    <div class="tipmessage-box" style="cursor: pointer"><i
                            class="iconfont iconiconfontunie62c tp1 pr pr-1"></i><span
                            class="im-notify ksd-im-number im-number im-center" style="display: none"></span>消息
                    </div>
                    <div class="i-frame animated2 fadeInDown"></div>
                    <div class="ksd-logindrop show" data-vip="2">
                        <a href="https://www.kuangstudy.com/u" class="ksd-home pr tp2" style="z-index: 11"><i
                                class="iconfont iconhome pr  pr-1"></i>进入主页</a>
                        <a class="dropdown-toggle ksd-user-info" href="javascript:void(0);" title="飞哥" data-vip="2"
                           id="navbarDropdown">
            <span class="pr">
                <img class="ksd-avatar2 ksd-avatar-img" src="https://www.kuangstudy.com//assert/course/c1//132" alt="">
                <span class="ksd-iconrenzheng-vip"><img src="https://www.kuangstudy.com//assert/course/c1//vip.png" alt=""></span>
            </span>
                            <span class="ksd-text">飞哥</span>
                        </a>
                        <div class="ksd-login-items">
                            <div class="ksd-header-items mt-3">
                                <ul>
                                    <li class="ksd-num-items">
                                        <a href="https://www.kuangstudy.com/u#topic">
                                            <span class="num ksd-num-count6">3</span>
                                            <span class="ktext">文章</span>
                                        </a>
                                    </li>
                                    <li class="ksd-num-items">
                                        <a href="https://www.kuangstudy.com/u#fans">
                                            <span class="num ksd-num-count1">7</span>
                                            <span class="ktext">关注</span>
                                        </a>
                                    </li>
                                    <li class="ksd-num-items">
                                        <a href="https://www.kuangstudy.com/u#follow">
                                            <span class="num ksd-num-count2">471</span>
                                            <span class="ktext">粉丝</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <div class="citems ksd-sign-items">
                                    <a href="javascript:void(0);" data-num="2" class="ksd-user-qiandao"><i
                                            class="iconfont iconsetlocation pr-2 pr tp1"></i><span
                                            class="ksd-uqtext">签到</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="ksd-login-items">
                            <ul>
                                <li class="items">
                                    <a href="https://www.kuangstudy.com/u" style="width:126px;text-align:left"
                                       title="点击前往个人中心" class="fl flitems"><i class="iconfont iconhome"></i>个人中心</a>


                                    <a href="https://www.kuangstudy.com/vip/pay" title="点击前往订购和续费"
                                       class="fr fritems pr"><span class="vipicon fw" style="padding:2px 6px">年会员</span></a>


                                </li>
                                <li class="items ksdcopylinknum" title="点击复制数字账号" data-clipboard-text="2">

                                    <a href="https://www.kuangstudy.com/u/settings" style="width:160px;text-align:left"
                                       class="fl ksd-settings2 flitems"><i class="iconfont iconiconzh1"></i>账号</a>
                                    <a href="javascript:void(0);" class="fr ksd-settings2 fritems">2</a>
                                </li>
                                <li class="items ksd-exp-itemboxs">
                                    <a href="javascript:void(0);" class="fl flitems"><i
                                            class="iconfont icondengji2 tp1 pr"></i>等级</a>
                                    <a href="javascript:void(0);" class="fr fritems ksd-coin-exp show1"
                                       data-exp="74000"><span class="ksd-num-exp">74000</span>exp</a>
                                    <a href="javascript:void(0);"
                                       class="fr fritems show2 ksd-coin-exp ksd-coin-exp-text" data-exp="74000">Lv6</a>
                                </li>
                                <li class="items">
                                    <a href="javascript:void(0);" class="fl flitems"><i class="iconfont iconjinbi"></i>K币</a>
                                    <a href="javascript:void(0);" class="fr fritems ksd-coin-coin"
                                       data-coin="4814887"><span
                                            class="ksd-coin-cointext ksd-num-coin">4814887</span><span
                                            class="pr ftp2">币</span></a>
                                </li>
                                <li class="items" title="订购会员">


                                    <a href="https://www.kuangstudy.com/vip/pay" style="text-align:left"
                                       class="fl ksd-settings2 flitems"><i
                                            class="iconfont iconVIP_paiban"></i>查看会员权益</a>
                                </li>
                                <li class="items">
                                    <a href="https://www.kuangstudy.com/u/settings" style="width:100%;text-align:left"
                                       class="fl flitems"><i class="iconfont iconSettingscontroloptions"></i>个人设置</a>
                                </li>
                            </ul>
                        </div>
                        <div class="ksd-login-items bnone">
                            <ul>
                                <li class="items">
                                    <a href="javascript:void(0);" class="fl flitems ksd-logout"><i
                                            class="iconfont iconai-out"></i>退出登录</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<!----------------------------------------------------------内容区域------------------------------------->
<div id="app" class="container" style="margin-top: 55px;"><h1 class="text-center fz32 mb-5"><a
        href="https://www.kuangstudy.com/app/code">笔记下载：https://www.kuangstudy.com/app/code</a></h1>
    <div id="ksd-alert-msg-1" class="alert alert-primary">
        <button type="button" data-dismiss="alert" class="close">×</button>
        <strong><i class="iconfont icontubiao_xitongtongzhi fz20"></i></strong>
    </div>
    <div class="row course-item-wrap">
        <div class="col-lg-12">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade show active">
                     <!------------扫描二维码就会访问下面的接口，点击支付会修改课程id 生成唯一的支付二维码，并且会触发定时器查询回调函数订单状态-->
<!--                   页面初始默认会获取一个二维码，但是没有触发定时器查询支付状态。-->
                    <div class="row">
                        <div class="col-lg-12 text-center">
                            <img :src="'/alipay/pay?courseid='+courseId" alt="">
                        </div>
                    </div>
                    <div class="row course-block">
                        <div id="courseListBox" class="course_bdleft Mtp25">
                            <div class="course_stage_item"><h2 index="1" id="ksd-title-position-1"
                                                               class="ksd-title-position-h2"><span
                                    class="cro_icon1">1</span> <span>第一阶段：JavaSE</span></h2>
                                <div class="path-course-r">
                                    <div class="row">
                                        <!---------------------课程列表------------------>
                                        <div v-for="(course,index) in courseList" class="col-lg-3 col-md-4 col-sm-6 animated fadeInUp delay-1s">
                                            <div class="course-item">
                                                <div class="course-img "><a
                                                        :href="'https://www.kuangstudy.com/course/detail/'+course.courseid"
                                                        target="_blank" :title="course.title" class="course__img"><img
                                                        height="140" width="100%" :src="'https://www.kuangstudy.com/'+course.img"> <span
                                                        class="num">1</span> <span class="stimer">￥{{course.price}}</span></a></div>
                                                <div class="course-content"><h3 :title="course.title" class="course__title"><a
                                                        href="https://www.kuangstudy.com/course/detail/1317503462556848129"
                                                        target="_blank" :title="course.title" class="course__img">{{course.title}}</a>
                                                </h3>
                                                    <p class="course__author">{{course.intro}}</p>
                                                    <div class="course-price-wrap" @click="changePay(index)"><span class="course__btn"><i
                                                            class="iconfont iconshouye"></i>  点击支付</span></div>
                                                </div>
                                            </div>
                                        </div>



                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>

    var vue = new Vue({
        el:"#app",
        data:{
            courseList:[],
            courseId:"",
            stimer:null
        },
        created:function(){
            // 加载课程产品
            this.loadCourse();
        },
        methods:{
            // 获取课程信息,而且页面加载后会给它一个默认的课程id,生成一个默认的二维码，生成预支付的订单，真正的支付是扫码之后的回调
           loadCourse:function(){
               var that = this;
               axios.post("/api/load/course").then(function(res){
                   if(res.data.code == 20000){
                       that.courseList = res.data.data.courseList;
                       //第一次加载的时候就会默认生成第一个课程的二维码
                       // that.courseId = that.courseList[0].courseid;
                   }
               })
           },
           //支付按钮，直接拿到列表中当前课程的id
            changePay:function(index){
               this.courseId = this.courseList[index].courseid;
               this.paycallback();
            },

            //计数器，轮询回调20次
            count:1,
            paycallback:function(){
               var that = this;
               var courseId =  that.courseId;
               if( that.count > 20){
                   if(that.stimer)clearInterval( that.stimer);
                   return;
               }

               // webscoket 点击支付后定时任务轮询查询支付状态
               that.stimer = setInterval(function(){
                   that.count ++;
                   axios.post("/api/order/detail/callback",{courseid:courseId}).then(function(res){
                       if(res.data.code == 20000){
                           alert("支付成功!!!");
                           that.count=21;
                           if(that.stimer)clearInterval( that.stimer);
                       }
                   })
               },3000)
            }
        }
    })

</script>
</body>
</html>